<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户操作日志管理</title>
    <link rel="stylesheet" type="text/css" href="./css/lock-list.css">
    <script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./js/lock-list.js"></script>
</head>
<body>
    <div class="header_container">
        <div class="header_container_date" id="dateInfo"></div>
        <div class="header_container_user">
            <span>欢迎您,</span><span class="admin">管理员</span>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./login.html"><span class="logout">退出</span></a>
        </div>
    </div>
    <div class="main_container">
        <div class="main_container_nav">
            <ul>
                <li><a href="./lock-list.html">门锁列表</a></li>
                <li><a href="./lock-log.html">门锁操作日志</a></li>
                <li><a href="./user-list.html">用户管理</a></li>
                <li class="triangle"><a href="./user-log.html">用户操作日志</a></li>
            </ul>
        </div>
        <div class="main_container_list">
            <table>
                <thead>
                    <tr>
                        <th>门锁ID</th>
                        <th>操作人ID</th>
                        <th>操作时间</th>
                        <th>操作人</th>
                        <th>操作类型</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>111111</td>
                        <td>000001</td>
                        <td>20180908</td>
                        <td>张三</td>
                        <td>开锁</td>
                    </tr>
                    <tr>
                        <td>222222</td>
                        <td>000001</td>
                        <td>20190104</td>
                        <td>张三</td>
                        <td>关锁</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="main_container">
        <h2>大数据展示</h2>
        <div class="echarts_box_container">
            <div class="echarts_box" id="main"></div>
            <div class="echarts_box" id="info"></div>
        </div>
    </div>
    <div class="footer_container">
        &copy;&nbsp;&nbsp;版权所有&nbsp;&nbsp;&nbsp;&nbsp;品西科技&nbsp;&nbsp;&nbsp;&nbsp;侵权必究
    </div>
<script type="text/javascript" src="./js/echarts.min.js"></script>
<script type="text/javascript" src="./js/china.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main'));
        var myChart2 = echarts.init(document.getElementById('info'));

        // 指定图表的配置项和数据
        option1 = {
            xAxis: {
                type: 'category',
                data: ["19~20","22~23","8~9","12~13","1~2"]
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [1823, 1720, 1698, 985, 280],
                type: 'line'
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);

        option2 = {
            title : {
                text: '智能门锁使用次数名单TOP5',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ["19~20","22~23","8~9","12~13","1~2"]
            },
            series : [
                {
                    name: '使用次数',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:1823, name:'19~20'},
                        {value:1720, name:'22~23'},
                        {value:1698, name:'8~9'},
                        {value:985, name:'12~13'},
                        {value:280, name:'1~2'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2);


</script>
</body>
</html>